<script setup>
defineProps({
  completion: {
    type: String,
    default: '60%'
  },
  water: {
    type: String,
    default: '#0494df'
  }
})
</script>

<template>
  <div style="border: 4px double #062b4d;background-color: #192030;"
    class="h-[48px] w-[48px] relative rounded-[50%] overflow-hidden flex justify-center items-center  shuibowen">
  </div>
</template>

<style scoped>
.shuibowen::after {
  display: block;
  width: 96px;
  height: 96px;
  content: '';
  background-color: v-bind('water');
  border-radius: 35px;
  position: absolute;
  left: -75%;
  top: 20%;
  translate: -50% 0;
  animation: spin 5s linear infinite;
  top: calc(100% - v-bind('completion'));
}

@keyframes spin {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}
</style>
